let bottom = [
    {
        "top":480,
        "left":0
    },
    {
        "top":480,
        "left":160
    },
    {
        "top":480,
        "left":320
    },
    {
        "top":480,
        "left":480
    },
    {
        "top":480,
        "left":640
    },
    {
        "top":560,
        "left":80
    },
    {
        "top":560,
        "left":560
    },
    {
        "top":720,
        "left":0
    },
    {
        "top":720,
        "left":80
    },
    {
        "top":720,
        "left":160
    },
    {
        "top":720,
        "left":240
    },
    {
        "top":720,
        "left":320
    },
    {
        "top":720,
        "left":400
    },
    {
        "top":720,
        "left":480
    },
    {
        "top":720,
        "left":560
    },
    {
        "top":720,
        "left":640
    }
];
let up = [{
        "top": 0,
        "left": 0
    },
    {
        "top": 0,
        "left": 80
    },
    {
        "top": 0,
        "left": 160
    },
    {
        "top": 0,
        "left": 240
    },
    {
        "top": 0,
        "left": 320
    },
    {
        "top": 0,
        "left": 400
    },
    {
        "top": 0,
        "left": 480
    },
    {
        "top": 0,
        "left": 560
    },
    {
        "top": 0,
        "left": 640
    },
    {
        "top": 160,
        "left": 80
    },
    {
        "top": 160,
        "left": 560
    },
    {
        "top": 240,
        "left": 0
    },
    {
        "top": 240,
        "left": 160
    },
    {
        "top": 240,
        "left": 320
    },
    {
        "top": 240,
        "left": 480
    },
    {
        "top": 240,
        "left": 640
    }
];

let [top_span,bottom_span,span,wrap,win,h1,btn,no,chaofeng,button] = [
    document.querySelectorAll(".top-span"),
    document.querySelectorAll(".bottom-span"),
    document.querySelectorAll("span"),
    document.querySelector(".wrap"),
    document.querySelector(".win"),
    document.querySelector("h1"),
    document.querySelector(".btn"),
    document.querySelector(".no"),
    document.querySelector('.chaofeng'),
    document.querySelector(".chaofeng button")
];
(()=>{
    for(let i=0; i<bottom.length; i++){
        top_span[i].style.left = up[i].left + "px";
        top_span[i].style.top = up[i].top + "px";
        bottom_span[i].style.left = bottom[i].left + "px";
        bottom_span[i].style.top = bottom[i].top + "px";
    }
})()

let Target = null;
let qiziArr = [];

//获取当前点击的棋子的top和left值
class Getqizi {
    constructor(){
        this.topArr = [];//第一个值永远都是top,第二个值是left
    }
    clickQz(ev){
        Target = ev.target;
        qiziArr.splice(0);
        qiziArr.push(ev.target.offsetTop);
        qiziArr.push(ev.target.offsetLeft);
    }
}
let getqizi = new Getqizi(event);
//end

//判断棋子的移动位置及阵营
class Qzrun extends Getqizi{
    constructor(span){
        super();
        this.spans = span;
    }
    location(ev){
        this.mouseX = event.pageX - (document.documentElement.clientWidth-wrap.clientWidth)/2;
        this.mouseY = ev.clientY;
        if(Target.className == "top-span"){
            this.chess(qiziArr)
        }else if(Target.className == "bottom-span"){
            this.chess(qiziArr)
        }
    }
    chess(camp){
        this.X = this.mouseX%80>40 ? Math.ceil(this.mouseX/80)*80 : Math.floor(this.mouseX/80)*80;
        this.Y = this.mouseY%80>40 ? Math.ceil(this.mouseY/80)*80 : Math.floor(this.mouseY/80)*80;
        if(Target.innerText == "兵" || Target.innerText == "车" || Target.innerText == "炮" || Target.innerText == "帅" || Target.innerText == "将"){
            if(this.mouseX%80>40 && this.mouseY<camp[0]+40 && this.mouseY>camp[0]-40 || this.mouseX%80<40 && this.mouseY<camp[0]+40 && this.mouseY>camp[0]-40){
                this.eat();
                Target.style.top = camp[0]+"px";
                Target.style.left = this.X + "px";
                this.winORlose();
            }else if(this.mouseY%80>40 && this.mouseX<camp[1]+40 && this.mouseX>camp[1]-40 || this.mouseY%80<40 && this.mouseX<camp[1]+40 && this.mouseX>camp[1]-40){
                this.eat();
                Target.style.left = camp[1] + 'px';
                Target.style.top = this.Y + "px";
                this.winORlose();
            }
        }else if(Target.innerText == "象"){
            if(this.mouseX%80>40 && this.mouseY%80>40 || this.mouseX%80<40 && this.mouseY%80<40){
                this.eat();
                Target.style.left = this.X + "px";
                Target.style.top = this.Y + "px";
                this.winORlose();
            }
        }else if(Target.innerText == "士"){
            let shiLeft = Target.offsetLeft;
            let shiTop = Target.offsetTop;
            if(this.mouseX>shiLeft+40 && this.mouseX<shiLeft+120 && this.mouseY>shiTop+40&&this.mouseY<shiTop+120
                || this.mouseX>shiLeft+40 && this.mouseX<shiLeft+120 && this.mouseY>shiTop-120 && this.mouseY<shiTop-40 ||
                 this.mouseX>shiLeft-120&&this.mouseX<shiLeft-40&&this.mouseY>shiTop-120&&this.mouseY<shiTop-40
                 || this.mouseX>shiLeft-120&&this.mouseX<shiLeft-40&&this.mouseY>shiTop+40&&this.mouseY<shiTop+120){
                this.eat();
                Target.style.left = this.X + "px";
                Target.style.top = this.Y + "px";
                this.winORlose();
            }
        }else if(Target.innerText == "马"){
            let maLeft = Target.offsetLeft;
            let maTop = Target.offsetTop;
            if(this.mouseX>maLeft+40 && this.mouseX<maLeft+120 && this.mouseY>maTop+120&&this.mouseY<maTop+200
                || this.mouseX>maLeft+120 && this.mouseX<maLeft+200 && this.mouseY>maTop+40 && this.mouseY<maTop+120
                ||
                 this.mouseX>maLeft+120&&this.mouseX<maLeft+200&&this.mouseY>maTop-120&&this.mouseY<maTop-40
                 || this.mouseX>maLeft+40&&this.mouseX<maLeft+120&&this.mouseY>maTop-200&&this.mouseY<maTop-120
                 ||this.mouseX>maLeft-120&&this.mouseX<maLeft-40&&this.mouseY>maTop-200&&this.mouseY<maTop-120
                 ||this.mouseX>maLeft-200&&this.mouseX<maLeft-120&&this.mouseY>maTop-120&&this.mouseY<maTop-40
                 ||this.mouseX>maLeft-200&&this.mouseX<maLeft-160&&this.mouseY>maTop+40&&this.mouseY<maTop+120
                 ||this.mouseX>maLeft-120&&this.mouseX<maLeft-40&&this.mouseY>maTop+120&&this.mouseY<maTop+200){
                    this.eat();
                    Target.style.left = this.X + "px";
                    Target.style.top = this.Y + "px";
                    this.winORlose();
                 }
        }
        
    }
    eat(){
        for(let item of this.spans){
            if(item.offsetTop == this.Y && item.offsetLeft == this.X){
                item.style.display = "none";
                item.innerText = "";
            }
        }
    }
    winORlose(){ 
        let red = "win";
        let blue = "win";
        for(let item of this.spans){
            if(item.innerText == "帅" && item.className == "bottom-span"){
                blue = "lose"
            }
            if(item.innerText == "将" && item.className == "top-span"){
                red = "lose"
            }
        }
        if(blue == "win"){
            win.style.display = "block";
            h1.innerText == `恭喜蓝方胜利！！！`;
        }
        if (red == "win"){
            win.style.display = "block";
            h1.innerText == `恭喜红方胜利！！！`;
        }
    }
}
let qirun = new Qzrun(span);
//end

//点击棋子
for(let item of span){
    item.onclick = function(){
        getqizi.clickQz(event);
        Target = event.target;
        return false;
    }
}

//点击棋盘，指定棋子的下落位置
wrap.onclick = function(){
    if(event.target.className != "top-span" && event.target.className != "bottom-span"){
        qirun.location(event);
    }
}

//游戏结束后，选择是否要重新开始
btn.onclick = function(){
    win.style.display = "none";
    h1.innerText = "";
}
no.onclick = function(){
    win.style.display = "none";
    h1.innerText = "";
    chaofeng.style.display = "block";
}

//嘲讽管用了 
button.onclick = function(){
    chaofeng.style.display = "none";
}